<template>
  <view class="contenter">
    <view class="time">
      <change-times @change="change"></change-times>
      <!-- 其他 -->
      <view class="flex-c-s-s" >
        <!-- 标题 -->
        <view class="flex-r-s-c title">
          <view></view>
          <text>上午预约</text>
        </view>
        <view class="u-flex time_list">
          <view class="time_list_view flex-c-c-c" v-for="(v,i) in item_list.morning" :class="{'activeTime':v.type == 1}" :key="i">
            <text>{{v.time}}</text>
          </view>
        </view>
        <!-- 标题 -->
        <view class="flex-r-s-c title">
          <view></view>
          <text>下午预约</text>
        </view>
        <view class="u-flex time_list">
          <view class="time_list_view flex-c-c-c" v-for="(v,i) in item_list.afternoon" :class="{'activeTime':v.type == 1}" :key="i" >
            <text>{{v.time}}</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import ChangeTimes from "../../components/item/changeTimes";
export default {
  name: "index",
  components: {ChangeTimes},
  data(){
    return{
      item_list: {},
      listId:[],//多选存时间
      date:'',
    }
  },
  onLoad() {
    this.setData()
  },
  methods:{
    //选择时间
    change(time){
      this.date = time
      console.log(time)
      this.setData()
    },
    setData(){
      this.$api.myDuty({date:this.date}).then(res => {
        this.item_list  = res.data
      })
    },
    // //选择时间段
    // changeTime(data){
    //   if(this.listId.length  === 0){
    //     this.listId.push(data.time)
    //   }else {
    //     if( !this.listId.includes(data.time)){
    //       this.listId.push(data.time)
    //       this.listId = [...new Set(this.listId )]
    //     }else {
    //       let index = this.listId.findIndex(item => item === data.time)
    //       this.listId = [...this.listId]
    //       this.listId.splice(index,1)
    //     }
    //   }
    // },
  }

}
</script>

<style scoped lang="scss">
  .contenter{
      margin:0  32rpx ;
    .title {
      height: 120rpx;
      width: 100%;

      view {
        height: 36rpx;
        width: 10rpx;
        border-radius: 5rpx;
        background-color: #45806E;
      }

      text {
        font-size: 28rpx;
        font-weight: bold;
        color: #272823;
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        margin-left: 15rpx;
      }
    }
    .time_list {
      width: 100%;
      height: auto;
      flex-wrap: wrap;

      .activeTime{
        color: #45806E;
        border: 2rpx solid #45806E !important;
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.08);
      }

      .time_list_view {
        border-radius: 8rpx;
        position: relative;
        margin-right: 12rpx;
        margin-bottom: 20rpx;
        border: 2rpx solid white ;
        background: white;
        width: 160rpx;
        height: 74rpx;
        &:nth-child(4n+0){
          margin-right: 0;
        }

        .is_time {
          position: absolute;
          right: 0;
          top: -13rpx;
          height: 26rpx;
          width: 52rpx;
          background-color: #EAEAEA;
          border-radius: 8rpx;

          text {
            font-size: 20rpx;
            color: #45806E;
          }
        }
      }
    }
    .active_time1 {
      background: #45806E;
      border: 2rpx solid #45806E;
      color: white;
    }
  }
</style>